<template>
        <ptitle title="AI小助手"/>
        <textarea id="ask" rows="5" cols="50" placeholder="请提问，AI帮你回答" v-model="question"></textarea><br/>
        <button @click="askAi">发送</button> <button @click="save">保存答案</button>
        <hr/>
        <h6>AI回答</h6>
        <load v-if="isLoading"/>
        <ul style="position:fixed;right:50px;top:100px;border:1px solid black" >
           <li v-for="h in histroys" :key="h" @click="showHistory(h)">{{h}}</li>
        </ul>
        <div>共回答{{wordQty}}字,不包含标点符号是{{wordQty2}}字</div>
        <div v-html="answerMark" ref="xx">
        </div>
</template>


<script>
   import axios from '../axios/index-ai.js'
   import load from "../components-ai/Loading.vue"
   import ptitle from '../components-ai/PageTitle.vue'

   import {useInfoStore} from "../store/InfoStore"
   export default {
      components:{load,ptitle}
      ,data(){
        return{
          question:""
          ,answer:""
          ,isLoading:false
          ,histroys:[]
        }
      }
      ,computed:{
         wordQty(){
           return this.answer.length;
         },
         wordQty2(){
           return this.answer.replace(/[！，。？、；：“”‘’《》【】—…]/g,'').length;
         },
         answerMark(){
             return marked.parse(this.answer);
         }
      }
     
     ,created:function(){
     }
     ,mounted:function(){
       this.loadHistory()
     }
     ,unmounted:function(){
     }
     ,methods:{
        showHistory:function(h){
           this.answer=localStorage.getItem("Q-"+h);
        }
        ,loadHistory:function(){
           for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            if(key.startsWith("Q-")){
              this.histroys.push(key.substring(2))
            }
          }
        }
        ,save(){
          if(this.question!=""&&this.answer!="")
            localStorage.setItem("Q-"+this.question,this.answer)
        }
        ,askAi:function(){
            const store=useInfoStore()
            this.isLoading=true;
            axios.post("https://dashscope.aliyuncs.com/compatible-mode/v1/chat/completions"
                    ,{
                        "model": "qwen-plus-2025-04-28",
                        "messages": [
                            {
                                "role": "system",
                                "content": "你是一个智能助手."
                            },
                            {
                                "role": "user", 
                                "content": this.question
                            }
                        ]
                    }
            )
            .then(d=>{
                this.isLoading=false;
                this.answer=d.data.choices[0].message.content;
                let token=d.data.usage.total_tokens;
                store.addQue();//递增问题数量
                store.addToken(token);
            })
         }
      }
      
   }
</script>

<style scoped>
  #answer{text-align:left}
</style>
